<template>
  <div class="Page">
    <navbar>
      <div slot="center">发现</div>
    </navbar>
    <div class="content">
      <!--轮播图-->
      <swiper>
        <slot>
          <mt-swipe :auto="5000" class="swimg">
            <mt-swipe-item><img src="../../assets/img/0.jpg" /></mt-swipe-item>
            <mt-swipe-item><img src="../../assets/img/1.jpg" /></mt-swipe-item>
            <mt-swipe-item><img src="../../assets/img/7.jpg"/></mt-swipe-item>
            <mt-swipe-item><img src="../../assets/img/1.jpg" /></mt-swipe-item>
         </mt-swipe>
        </slot>
      </swiper>
      <!--九宫格-->
      <hot></hot>
      <!--内容模块二-->
      <div class="Modular">
        <div class="topic"><span>{{title}}</span></div>
        <ul class="topicA">
          <li class="topicB" v-for="item in listyi" :key="item.id">
            <div class="topicC">{{ item.text }}</div>
          </li>
        </ul>
      </div>
    </div></div>
</template>
<script>
import navbar from "../../components/navbar/navbar";
import swiper from "../../components/swiper/swiper.vue";
import hot from "../../components/hot/hot.vue";
export default {
  name: "Find",
  components: {
    navbar,
    swiper,
    hot,
  },

  data() {
    return {
      title:'热门活动',
      listyi: [
        {
          id: 0,
          text: "第一眼缘",
        },
        {
          id: 1,
          text: "缘分匹配",
        },
        {
          id: 2,
          text: "成功故事",
        },
        {
          id: 3,
          text: "线下匹配",
        },
      ],
    };
  },
};
</script>
<style scoped>
.swimg{
  height: 180px;
}
.swimg img{
  width: 100%;
  box-sizing: border-box; 
  object-fit: cover;
}
.Modular {
  text-align: center;
  display: flex;
  flex-flow: column;
}
.topic {
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: rgb(228, 228, 228);
}
.topicA {
  width: 100%;
  flex-wrap: wrap;
  list-style-type: none;
  display: flex;
  padding: 0;
}
.topicB {
  line-height: 100px;
  justify-content: center;
  justify-items: center;
  width: 50%;
  display: flex;
}
.topicC {
  width: 100%;
  display: block;
  height: 100px;
  margin: 10px;
  margin-left: 15px;
  margin-right: 15px;
  background-color: antiquewhite;
}

</style>
